<template>
<div>

  <!--店铺信息-->
  <div class="weui-cells__title">店铺信息</div>
  <div class="weui-cells weui-cells_form">
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">店铺名称</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input" type="text" placeholder="请填写店铺名称" v-model="shopInfo.name"/>
      </div>
    </div>

    <div class="weui-cell shop-img">
      <div class="weui-cell__hd"><label class="weui-label">店铺封面图片</label></div>
      <div class="weui-cell__bd">
        <!--店铺图片-->
        <croppa v-model="myCroppa"
                :width="100"
                :height="100"
                placeholder=""
                ref="myCroppa"
        >
          <img slot="placeholder" src="../../../static/images/shopAut/shop-bg.png">
        </croppa>
      </div>
    </div>

  </div>

  <div class="btn-box">
    <button class="weui-btn weui-btn_warn" :class="{btn_disabled:isDisabled}" @click.prevent="audClick">提交审核</button>
  </div>

</div>
</template>

<script>
  import {getStatusMapByKey,setUser,getUser} from '../../assets/js/tools.js';
  import {ipconfig} from '../../assets/js/ipconfig';
  import {shopAuditting,uploadMedia,getUserMsg} from '../../assets/js/getData';
  export default {
    name: "shopAut",
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
        urlType:null,
        user:null,
        shopInfo:{
          code:'',	//店铺code
          name:''	,//店铺名称
          signature:'',	//店铺签名
          presentation:'',	//店铺介绍
          smImageUrl:'',	//头像
          mxImageUrl:'',//封面
        },
        myCroppa:null,
      }
    },
    created(){
      let eStorageUrl = getStatusMapByKey('eStorageUrl');
      this.urlType = eStorageUrl['shopImages'].val;
      this.user = getUser();
    },
    mounted(){
      this.$refs.myCroppa.$refs.wrapper.onclick = () => {
        let arr = document.getElementsByTagName('input');
        for(let i=0; i<arr.length;i++){
          arr[i].blur();
        }
      };
    },
    computed:{
      isDisabled(){
        if(this.shopInfo.name&&this.myCroppa&&this.myCroppa.hasImage()){
          return false;
        }else {
          return true;
        }
      }
    },
    methods:{
      audClick(){
        if(this.isDisabled){
          return;
        }
        if(!this.shopInfo.name){
          Toast('请填写店铺名称');
          return;
        }
        if (!this.myCroppa.hasImage()) {
          Toast('请选择店铺封面图片');
          return;
        }
        this.myCroppa.generateBlob((blob)=>{
          let formdata = new FormData();
          formdata.append('files', blob);
          formdata.append('type',  this.urlType);
          formdata.append('needSmImg',1);
          //上传图片
          uploadMedia(formdata).then(res => {
            if(res.data.reqResult.code > 0){
              this.shopInfo.smImageUrl = res.data.data[0].smImageUrl;
              this.shopInfo.mxImageUrl = res.data.data[0].mxImageUrl;
              //店铺认证提交
              let params = {
                name:this.shopInfo.name,//（用户类型：1个人、2商家）
                smImageUrl:this.shopInfo.smImageUrl,
                mxImageUrl:this.shopInfo.mxImageUrl
              };
              shopAuditting(params).then(res => {
                if(res.data.reqResult.code > 0){
                  getUserMsg().then(res => {
                    if(res.data.reqResult.code>0){
                      let data = res.data.data.user;
                      this.user.shopAudittingStatus = data.shopAudittingStatus;
                      setUser(this.user);
                      this.$router.replace({name:'shopAudit'});
                    }else {
                      Toast(res.data.reqResult.msg);
                    }
                  });
                }else {
                  Toast(res.data.reqResult.msg);
                }
              })
            }else {
              Toast(res.data.reqResult.msg);
            }
          });
        });
      },
    }
  }
</script>

<style scoped>
  .shop-img{
    padding-bottom: 1.25rem;
  }
  .shop-img .weui-cell__hd{
    align-self: flex-start;
  }
  .uploader__input-box{
    position: relative;
    width: 5rem;
  }
  .uploader__input-box img{
    width: 100%;
  }
  .btn-box{
    position: absolute;
    bottom: 1.6rem;
    left: 0;
    right: 0;
  }
  .uploader__input-box div{
    height: 4.25rem;
  }
</style>
